<template>
	<view>
		<view v-if="pos<=subNum" class="container">
			<view class="bit-num">
				<text>{{pos}}</text>/{{subNum}}
			</view>
			<view class="num">{{one}} {{['＋','-','×','÷'][mathType-1]}} {{two}}</view>
			<input v-model="result" ref="input"  class="result" type="number" auto-focus @confirm="confirm" confirm-hold>
		</view>
		<view v-if="type==2 && pos>subNum" class="container">
			<view class="second">{{time}}秒</view>
			<input v-model="name" class="name" type="text" placeholder="输入名字" maxlength="5" auto-focus />
			<button @click="save">保存</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bitNum:10, // 大小
				subNum: 5, // 数量
				type: 1, // 1练习 2计时
				mathType: 1, // 1 加法 2减法 3乘法 4除法
				pos: 1,
				result: Infinity,
				one: Infinity,
				two: Infinity,
				startTime: 0,
				time: 0,
				name: '',
			};
		},
		methods: {
			save() {
				if (this.name.length == 0) {
					uni.showToast({
						icon: "error",
						title: "请输入名字"
					})
					return;
				}
				let history = uni.getStorageSync('history') || [];
				history.push({
					name: this.name,
					bitNum: this.bitNum,
					subNum: this.subNum,
					mathType: this.mathType,
					time: this.time,
					date: new Date()
				})
				uni.setStorageSync('history',history)
				uni.showToast({
					title: "保存成功"
				})
				setTimeout(()=>{
					uni.switchTab({
						url: "/pages/rank/rank"
					})
				},500)
			},
			confirm(e) {
				let mathType = this.mathType;
				let one = this.one;
				let two = this.two;
				let result = this.result;
				if (mathType == 1 && result == one + two) {
					this.createSub()
				} else if (mathType == 2 && one - two == result) {
					this.createSub()
				} else if (mathType == 3 && one * two == result) {
					this.createSub()
				} else if (mathType == 4 && one / two == result) {
					this.createSub()
				} else { // 答案错误
					uni.showToast({
						icon: "error",
						title: "错误"
					})
					this.result = '';
					return;
				}
				this.result = '';
				console.log(this.pos)
				if (this.pos == this.subNum) {
					this.time = ((new Date() - this.startTime) /1000).toFixed(2);
					if (this.type == 1) {
						uni.showToast({
							title:"完成! 休息一下吧",
							duration: 2000
						})
						setTimeout(()=>{
							uni.navigateBack()
						},2000)
					}
				}
				this.pos += 1;
				
				
			},
			// 生成题目
			createSub() {
				let max,min,one,two;
				max = this.bitNum
				switch (this.bitNum) {
					case '10':
						min = 1;
						break;
					case '20':
						min = 10;
						break;
					case '50':
						min = 20;
						break;
				}
				one = Math.floor(Math.random()*(max-min+1))+min;
				two = Math.floor(Math.random()*(max-min+1))+min;
				if (this.mathType == 4) {
					this.one = one*two;
					this.two = two;
				} else {
					this.one = Math.max(one,two)
					this.two = Math.min(one,two)
				}
			}
		},
		created() {
			let {bitNum,subNum,type,mathType} = this.$route.query;
			this.subNum = subNum;
			this.bitNum = bitNum;
			this.type = type;
			this.mathType = mathType;
			this.createSub();
			this.startTime = new Date()
		}
	}
</script>

<style lang="scss">
	.container {
		padding: 40upx;
	}
	.bit-num {
		display: flex;
		justify-content: flex-end;
		align-items: flex-end;
		color: #666;
		text {
			color: #333;
		}
	}
	.num {
		font-size: 80upx;
		text-align: center;
		margin: 40upx;
	}
	.result {
		width: 30%;
		padding: 5px 0;
		border-bottom: 1px solid #dedede;
		margin: 0 auto;
		text-align: center;
		font-size: 100upx;
	}
	.second {
		font-size: 80upx;
		text-align: center;
	}
	.name {
		margin: 40upx auto;
		padding: 5px 0;
		width: 50%;
		border-bottom: 1px solid #dedede;
	}
	button {
		width: 50%;
		margin: 0 auto;
	}
	
</style>
